<template>
    <div>
        <!-- max-width:750px; 此宽度用于整体页面固定时-->
        <scroller v-show="!isWeChar" :lock-x="true" :lock-y="true" style="width:100%;height:46px;z-index:2;">
            <div class="order__head">
                <x-header>
                    <div slot="default" class="common__header--title">选择保单</div>
                    <div @click="goBack" slot="overwrite-left" class="common__header--img"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
                </x-header>
            </div>
        </scroller>
        <div id="order--list" class="order__list">
            <transition name="slide-fade"> -->
                <!-- max-width:750px; 此宽度用于整体页面固定时 -->
                <vue-scroller v-show="showAnimate" :style="scrollerStyle" v-if="!order.isFind" :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller">
                    <div class="policy-list--item" :style="getProStyle(index)" v-for="(order,index) in order.prpCmainList" :key="index">
                        <div @click="getPayDetail(order)">
                            <div v-show="baseServiceName!='pay'" class="policy-list__date">
                                保单号：{{order.policyno}}
                                <span :style="stateColor(order.status)" class="policy-list__date--state">{{order.status |orderState}}</span>
                            </div>
                            <div v-show="baseServiceName=='pay'" class="policy-list__date">
                                投保单号：{{order.proposalNo}}
                                <span :style="stateColor(order.status)" class="policy-list__date--state">{{order.status |orderState}}</span>
                            </div>
                            <div class="policy-list__content">
                                <span class="policy-list__content--type">{{order.riskcname}}</span>
                                <span v-show="isBlacklist(order)" class="policylist__content--price">￥{{order.sumpremium}}</span>
                                <br/>
                                <span class="policy-list__content--name">投保人:{{order.appliname}} &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span>
                                <span class="policy-list__content--name">被保人:{{order.insuredname}}</span>
                            </div>
                            <div class="policy-list__date policy-list__valid">
                                保险有效期：{{order.startdate}} 至 {{order.enddate }}
                            </div>
                        </div>
                        <!-- <scroller lock-y :scrollbar-x="false"> -->
                        <div v-show="!isShowPay()" class="common-order__btn policyList-item">
                            <checker radio-required class="common-classroom__checker" default-item-class="common-order__item--default " selected-item-class="common-order__item-selectedmessage">
                                <checker-item @click.native="getFunction(order)" v-show="isShowPolicy(order)" class="grid-center order__item" value="1">电子保单</checker-item>
                                <checker-item v-show="isShowDetail(order)" class="grid-center order__item" @click.native="getOrderDetail(order)" value="5">保单详情</checker-item>
                                <checker-item @click.native="getFunction(order)" v-show="isShowInvoice()" class="grid-center order__item" value="2">电子发票</checker-item>
                                <!-- <checker-item v-show="isShowPay()" class="grid-center order__item" @click.native="Pay(order)" value="5">付款</checker-item> -->
                                <!-- <checker-item @click.native="getClause(order)" v-show="order.stateShow.clause" class="grid-center order__item" value="6">上传照片</checker-item>  -->
                                <checker-item @click.native="getFunction(order)" v-show="isShowFnol(order)" class="grid-center order__item" value="6">马上报案</checker-item>
                            </checker>
                        </div>
                        <!-- </scroller> -->
                    </div>
                </vue-scroller>
            </transition>
        </div>

        <div class="policyList__footer">
            <div @click="findOtherPolicy"><img style="width: 15px;" src="~assets/x3/ico/icon_find.png">&nbsp&nbsp查询其他保单</div>
        </div>

        <!-- <div @click="findOtherPolicy" class="policy_find">
            <img class="policy-find-icon" src="~assets/x3/ico/find.png">
        </div> -->

        <x-dialog v-model="order.showPolicyEmail" class="dialog-Einv" hide-on-blur>
            <send-Email></send-Email>
        </x-dialog>
        <pay-com></pay-com>
    </div>
    </div>
</template>
<script>
import PayCom from "src/components/PayCom";
import vueScroller from "src/common/vueScroller/components/Scroller";
import SendEmail from "src/components/SendEmail";
// import ReportImmediately from "src/components/ReportImmediately";
import Config from "src/common/config/orderConfig";
import DateUtil from "src/common/util/dateUtil";
import { RequestUrl } from "src/common/url";
import { XHeader, XTable, Scroller, Cell, CellBox, CellFormPreview, Group, Badge, ButtonTab, ButtonTabItem, Divider, Checker, CheckerItem, XDialog, Alert, AlertPlugin, XButton, TransferDomDirective as TransferDom, XInput } from "vux";
import { mapState, mapActions } from "vuex";
import { Mutations, RouteUrl, SaveName, BaseService } from "src/common/const";
export default {
    components: { Scroller, XInput, Group, XDialog, Alert, AlertPlugin, XButton, TransferDom, vueScroller, XHeader, Cell, CellFormPreview, CellBox, Badge, ButtonTab, ButtonTabItem, Divider, XTable, Checker, CheckerItem, SendEmail, PayCom },
    computed: mapState(["order", "user", "isWeChar"]),
    data() {
        return {
            scrollerStyle: "position: fixed;padding-top: 44px;padding-bottom: 75px;z-index:0;",
            showEinv: false,
            results: [],
            value: "test",
            seleState: "",
            stateShow: {},
            items1: [
                {
                    key: "",
                    value: "全部"
                },
                {
                    key: "2",
                    value: "待支付"
                },
                {
                    key: "1",
                    value: "有效 "
                },
                {
                    key: "3",
                    value: "失效"
                }
            ],
            orderState: [],
            seleOrder: {},
            showAnimate: true,
            prpCmainList: [],
            baseServiceName: "",
        };
    },
    watch: {
        seleState(cur, old) {
            this.showAnimate = false;
            this.queryOrder("infinite");
            let _this = this;
            setTimeout(function () {
                _this.showAnimate = true;
            }, 100);
        }
    },
    filters: {
        resData(value) {
            return DateUtil.getDateByStrYmdOrYmdhms(value);
        },
        dateFormat(value) {
            return DateUtil.getDateStr_YmdByTs(value);
        },
        orderState(index) {
            let returnData = Config.getPolicyStateType(index);
            if (returnData == "" || typeof (returnData) == "undefined" || returnData == null || returnData == "undefined") {
                returnData = "无效";
            }
            if (localStorage["ID_CAR_MENU_BASE_SERVICE"] == BaseService.PAY) {
                return "待支付";
            }
            return returnData;
        }
    },
    methods: {
        findOtherPolicy() {
            this.$common.goUrl(this, RouteUrl.ID_CAR_AUTHENTICATION);
        },
        isBlacklist(order) {
            if (order.appliname.indexOf("恒昌德盛") > -1) {
                return false;
            }
            if (order.insuredname.indexOf("恒昌德盛") > -1) {
                return false;
            }
            return true;
        },
        isShowFnol(order) {
            if ((this.order.menu.baseService == BaseService.FNOL || localStorage["ID_CAR_MENU_BASE_SERVICE"] == BaseService.FNOL) && order.status == 1) {
                return true;
            } else {
                return false;
            }
        },
        isShowDetail(order) {
            if (this.order.menu.baseService != BaseService.PAY && localStorage["ID_CAR_MENU_BASE_SERVICE"] != BaseService.PAY && order.status != 8 && order.status != 9) {
                return true;
            } else {
                return false;
            }
        },
        getPayDetail(order) {
            // this.$common.goUrl(this, RouteUrl.ORDER_DETAILS);
            // let test = this.order.menu.baseService;
            // let test2 = ["ID_CAR_MENU_BASE_SERVICE"];
            if (this.order.menu.baseService == BaseService.PAY || localStorage["ID_CAR_MENU_BASE_SERVICE"] == BaseService.PAY) {
                let payData = {
                    order: order,
                    _this: this

                }
                this.$common.storeCommit(this, Mutations.SET_SHOW_PAY_DEFAULT, "");
                this.$common.goUrl(this, RouteUrl.PAY_DETAILS);
                this.$common.storeCommit(this, Mutations.SET_SHOW_PAY_DATA, payData);
            }
            // let payData = {
            //     _this: this,
            //     paymentNo: order.proposalNo,
            //     riskCode: order.riskcode
            // };
            // this.$common.storeCommit(this, Mutations.PAY_SET_DATA, payData);
        },
        isShowPay() {
            if (this.order.menu.baseService == BaseService.PAY || localStorage["ID_CAR_MENU_BASE_SERVICE"] == BaseService.PAY) {
                return true;
            } else {
                return false;
            }
        },
        getOrderDetail(order) {
            //8805081100170000147000
            // if (this.order.menu.baseService == BaseService.PAY || ["ID_CAR_MENU_BASE_SERVICE"] == BaseService.PAY) {
            //     // return true;

            // } else {
            let data = {
                _this: this,
                policyNo: order.policyno
            }
            this.$common.storeCommit(this, Mutations.GET_ORDER_DETAIL, data);
            // }

        },
        isShowPolicy(order) {
            if (this.order.menu.baseService == BaseService.POLICY || localStorage["ID_CAR_MENU_BASE_SERVICE"] == BaseService.POLICY) {
                //8805025002170000018000
                let proposalNo = order.policyno;
                if (proposalNo.substring(2, 4) == "05") {
                    if (proposalNo.substring(6, 8) == "11") {
                        return true;
                    } else {
                        return false;
                    }
                }
                return true;
            } else {
                return false;
            }
        },
        isShowInvoice() {
            if (this.order.menu.baseService == BaseService.INVOICE || localStorage["ID_CAR_MENU_BASE_SERVICE"] == BaseService.INVOICE) {
                return true;
            } else {
                return false;
            }
        },
        stateColor(index) {
            let color = "#dedede"
            if (index < 9) {
                color = Config.getOrderStateColor(index);
            }
            if (this.baseServiceName == BaseService.PAY) {
                color = Config.getOrderStateColor(8);
            }
            return "color:" + color + ";border: 1px solid " + color;
        },
        refresh(done) {
            let _this = this;
            $("#order--list").fadeOut();
            setTimeout(() => {
                _this.queryOrder("refresh", done);
                done();
            }, 500);
            $("#order--list").fadeIn();
        },
        infinite(done) {
            let _this = this;
            setTimeout(() => {
                _this.queryOrder("infinite", done);
                done(_this.order.poIsEnd);
            }, 500);
        },
        queryOrder(operation, done) {
            let menuName = this.order.menu.baseService;
            if (typeof (menuName) == "undefined" || menuName == "undefined") {
                menuName = localStorage["ID_CAR_MENU_BASE_SERVICE"];
            }
            let type = menuName;
            // if (menuName == BaseService.PAY) {
            //     type = BaseService.PAY;
            // }
            let queryData = {
                _this: this,
                operation: operation,
                done: done,
                type: type
            };
            this.$common.storeCommit(this, Mutations.ORDER_POLICYS, queryData);
        },
        getProStyle(value) {
            if (value % 2 == 0) {
                return "background-color:	#FAFAFA;";
            } else {
                return "background-color: #FFF;";
            }
        },
        goBack() {
            // this.$common.goBackUrl(this, RouteUrl.SERVICE);
            this.$common.goBack(this);
        },
        getFunction(order) {
            // debugg
            // let nowData = sessionStorage["dataTime"];
            // let startdate = DateUtil.getDateByString(order.startdate.split(" ")[0]).getTime();
            // let enddate = DateUtil.getDateByString(order.enddate.split(" ")[0]).getTime();
            let menuName = this.order.menu.baseService;
            if (typeof (menuName) == "undefined" || menuName == "undefined") {
                menuName = localStorage["ID_CAR_MENU_BASE_SERVICE"];
            }
            // if (enddate > nowData && startdate < nowData) {
            if (menuName == BaseService.FNOL && order.status == 1) {
                // if (enddate > nowData && startdate < nowData) {
                let parm = {
                    policyNo: order.policyno,
                    riskCode: order.riskcode,
                    type: 1,
                    enddate: order.enddate,
                    startdate: order.startdate
                }
                this.$common.storeCommit(this, Mutations.IS_SHOW_REPORT_IM, parm);
                this.$common.goUrl(this, RouteUrl.REPORT_IMMEDIATELY);
                // } else {
                //     this.$vux.alert.show({
                //         title: "提示",
                //         content: "该保单不在当前期限！无法报案！"
                //     });
                // }
            } else if (menuName == BaseService.CLAIM_UPLOAD && order.status == 1) {
                let parm = {
                    policyNo: order.policyno,
                    riskCode: order.riskcode,
                    type: 2
                }
                this.$common.storeCommit(this, Mutations.IS_SHOW_REPORT_IM, parm);
                this.$common.goUrl(this, RouteUrl.REPORT_IMMEDIATELY);
                //资料上传
                // this.$common.goUrl(this, RouteUrl.REPORT_UPLOAD_FILES);
            } else if (menuName == BaseService.CLAIM_QUERY && (order.status == 1 || order.status == 0)) {
                let orderData = {
                    policyNo: order.policyno
                }
                let data = { _this: this, order: orderData }
                this.$common.storeCommit(this, Mutations.SHOW_HISTORY_CASE, data);
            } else if (menuName == BaseService.POLICY && (order.status == 0 || order.status == 1)) {
                let email = "";
                if (this.user.isLogin && typeof (this.user.email) != "undefined") {
                    email = this.user.email
                }
                let queryData = {
                    TYPE: "FORM",
                    policyNo: order.policyno,
                    proposalDate: "",
                    emailStr: email,
                    applicantName: order.appliname,
                    user: this.user,
                    showPolicyEmail: true,
                    proposalDate: "",
                };
                this.$common.storeCommit(this, Mutations.SEND_POLICY_EMIAL, queryData);


            } else if (menuName == BaseService.INVOICE && (order.status == 0 || order.status == 1)) {
                let queryOrder = {
                    policyNo: order.policyno,
                    idNo: order.appliIdentifynumber,
                    riskCode: order.riskcode,

                }
                let data = {
                    _this: this,
                    order: queryOrder
                };
                this.$common.storeCommit(this, Mutations.ORDER_QUERY_EINV, data);
            }
            // }
            // else {
            //     this.$vux.alert.show({
            //         title: "提示",
            //         content: "该保单不在有效期限！"
            //     });
            // }
        },
    },
    beforeRouteEnter(to, from, next) {
        sessionStorage["POLICY_FROM_PATH"] = from.path;
        next();
    },
    // beforeRouteEnter(to, from, next) {
    //     sessionStorage["POLICYLIST_FORM_URL"] = from.path;
    //     next();
    // },
    // beforeMount() {
    //     if (sessionStorage["POLICYLIST_FORM_URL"] == "/") {
    //         this.$common.goUrl(this, RouteUrl.INDEX);
    //     }
    // },
    // beforeDestroy() {
    //     alert(1);
    // },
    mounted() {
        document.title = '选择保单';
        if (sessionStorage[SaveName.IS_ORDER_FIND] == "F") {
            let findData = {
                isFind: false
            };
            this.$common.storeCommit(this, Mutations.SET_FIND_DATA, findData);
        }
        if (this.isWeChar) {
            this.scrollerStyle = "position: fixed;padding-top: 0px;padding-bottom: 75px;z-index:0;";
        }
        let queryData = {
            showPolicyEmail: false
        };
        // this.$common.storeCommit(this, Mutations.IS_SHOW_VUE_SCROLLER_RE, true);
        this.$common.storeCommit(this, Mutations.VUE_SCROLLER_BTN, 0);
        this.$common.storeCommit(this, Mutations.SEND_POLICY_EMIAL, queryData);
        if (localStorage["POLICY_FROM_PATH"] != "/" && this.order.menu.baseService != "undefined" && typeof (this.order.menu.baseService) != "undefined") {
            localStorage["ID_CAR_MENU_BASE_SERVICE"] = this.order.menu.baseService;
        }
        this.baseServiceName = localStorage["ID_CAR_MENU_BASE_SERVICE"];
        this.$common.storeCommit(this, Mutations.VUE_SCROLLER_NO_MORE_DATA, "没有更多保单了");
        // this.prpCmainList = this.order.prpCmainList;
        let _this = this;
        this.$init.subPageInit(this);
    }
};
</script>

<style lang="scss">
.policy_find {
  // display: -webkit-inline-box;
  // padding: 15px;
  // border-radius: 30px;
  // background: #C8161D;
  color: #000;
  font-size: 15px;
  font-weight: bold;
  position: fixed;
  right: 2%;
  bottom: 5%;
  .policy-find-icon {
    width: 70px;
  }
}

.order__head {
  position: relative;
  width: 100%; // max-width: 750px;
  height: 46px; // background-color: #f95;
  z-index: 2; //auto：默认值。浏览器允许一些手势（touch）操作在设置了此属性的元素上，例如：对视口（viewport）平移、缩放等操作。
  //none：禁止触发默认的手势操作
  //pan-x：可以在父级元素(the nearest ancestor)内进行水平移动的手势操作。
  //pan-y：可以在父级元素内进行垂直移动的手势操作。
  //manipulation：允许手势水平/垂直平移或持续的缩放。任何auto属性支持的额外操作都不支持。
  //touch-action只支持具有CSS width和height属性的元素
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}

.order__title {
  position: relative;
  height: 35px; // max-width: 750px;
  padding: 0px 20px;
  padding-bottom: 10px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
  z-index: 2; //auto：默认值。浏览器允许一些手势（touch）操作在设置了此属性的元素上，例如：对视口（viewport）平移、缩放等操作。
  //none：禁止触发默认的手势操作
  //pan-x：可以在父级元素(the nearest ancestor)内进行水平移动的手势操作。
  //pan-y：可以在父级元素内进行垂直移动的手势操作。
  //manipulation：允许手势水平/垂直平移或持续的缩放。任何auto属性支持的额外操作都不支持。
  //touch-action只支持具有CSS width和height属性的元素
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  padding-left: 12px;
}

.order__list {
  position: relative;
  width: 100%; // max-width: 750px;
  background-color: #C8161D;
}

.order__btn {
  padding: 10px 15px;
  padding-left: 0px;
  width: max-content;
  text-align: center;
  padding-top: 7px;
}

.vux-close {
  margin-top: 8px;
  margin-bottom: 8px;
}

.order__rable--content {
  font-size: 14px;
}

.order__rable--number {
  font-size: 14px;
  color: #C8161D;
}

.order__list_title {
  border: 1px solid #C8161D;
  font-size: 14px;
  color: #C8161D;
  padding: 3px 3px;
}

.classroom__checker {
  width: 100%;
}

.vux-table:after {
  border-top: 0px !important;
}

.order__serch {
  width: 100%;
  padding: 0px 4%;
  position: relative;
}

.order__serch--input {
  width: 70%;
  padding: 12px 2.5%;
  border: 0px;
  background: #f5f5f5;
  font-size: 12px;
}

input::-webkit-input-placeholder {
  color: #9c9c9c;
}

.order__serch--button {
  padding: 10.5px 4.6%;
  background: #f5f5f5;
  font-size: 14px;
  width: auto;
  color: #9c9c9c;
  height: 100%;
}

.order__btn {
  padding: 10px 15px;
  padding-left: 0px;
  width: max-content;
  text-align: center;
  padding-top: 7px;
}

.classroom__checker {
  width: 100%;
}

.order__itemmessage {
  font-size: 14px;
  padding: 5px 8px;
}

.order__item--default {
  border: 1px solid #C8161D;
  border-radius: 3px;
  color: #C8161D !important;
  margin-right: 5px;
  padding: 4px;
  font-size: 13px;
}

.polictlist__item-selectedmessage {
  background-color: #C8161D;
  font-size: 12px;
  color: #fff !important;
  border-radius: 3px;
  padding: 5px 8px;
}

td {
  width: 33.3%;
}

.policy-list--item {
  padding: 12px;
  font-size: 14px;
  border-top: 1px solid #ededed;
  background-color: #fff;
}

.policy-list__date--state {
  border: 1px solid #dedede;
  padding: 0px 5px;
  border-radius: 3px;
  font-size: 12px;
  float: right;
}

.policy-list__date {
  color: #7a7a7a;
}

.policy-list__content {
  font-size: 15px;
  padding: 0px 0;
}

.policy-list__content--type {
  font-weight: bolder;
  margin-right: 4%;
}

.policylist__content--price {
  color: #C8161D;
  float: right;
}

.policy-list__valid {
  font-size: 13px;
  padding-bottom: 0px;
}

.policyList-item {
  width: 100%;
  text-align: right;
  padding-top: 5px;
}

.policyList__footer {
  position: fixed;
  bottom: 0px;
  z-index: 5;
  width: 100%;
  height: 40px;
  background-color: #C8161D;
  div {
    color: #fff;
    height: 100%;
    line-height: 40px;
    text-align: center;
    font-size: 17px;
  }
  box-shadow: 0px 0px 10px 1px #efefef;
}
</style>






